<template>
  <div :id="id" :class="className" :style="{ height, width }" />
</template>

<script setup lang="ts">
import { nextTick, onMounted, onUnmounted } from "vue";
import { init, type EChartsOption, type EChartsType } from "echarts";
import * as echarts from "echarts";
import { useChartStore } from "@/stores/chartStore";
import type { SunnyResultSummary } from "@/types/sunnyResult/type";

const chartStore = useChartStore();
//定义一个普通变量作为成员变量，方便各个方法调用。
let chart: EChartsType;

onMounted(() => {
  //防止div还没加载的时候就开始去进行chart的初始化，等到vue完成一个tick的HTML元素更新之后再进行操作。
  nextTick(() => {
    initChart();
  }).then(() => {
    if (chart) chartStore.listenResize(chart);
  });
});

/**
 * 完成事件的解绑
 */
onUnmounted(() => {
  if (chart) chartStore.removeListener(chart);
});

const props = defineProps({
  id: {
    type: String,
    default: "runSummaryPie",
  },
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "200px",
    required: true,
  },
  height: {
    type: String,
    default: "200px",
    required: true,
  },
  title: {
    type: String,
  },
  chartData: { type: Array<SunnyResultSummary>, required: true },
});

function initChart() {
  chart = init(document.getElementById(props.id) as HTMLDivElement);
  console.log("传入图表的数据是", props.chartData);

  chart.setOption({
    title: {
      text: props.title,
      x: "center",
      padding: 15,
      textStyle: {
        fontSize: 18,
        fontStyle: "normal",
        fontWeight: "bold",
        color: "#337ecc",
      },
    },
    grid: {
      show: false,
      left: "2%",
      right: "2%",
      bottom: "10%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    legend: {
      x: "center",
      y: "bottom",
      data: ["通过数", "失败数", "未执行数"],
    },
    xAxis: [
      {
        type: "category",
        data: props.chartData?.map(
          (line) => line.projectName + "-" + line.buildOrder
        ),
        axisPointer: {
          type: "shadow",
        },
        axisLabel: {
          padding: 0,
          overflow: "truncate",
        },
      },
    ],
    yAxis: [
      {
        name: "数量（条）",
        type: "value",
        min: 0,
        max: Math.max.apply(
          Math,
          props.chartData.map((line) => line.caseCount)
        ),
        axisLabel: {
          formatter: "{value} ",
        },
      },
    ],
    series: [
      {
        name: "通过数",
        type: "line",
        stack: "Total",
        data: props.chartData.map((line) => line.passCount),
        itemStyle: { color: "#67C23A" },
        areaStyle: {
          color: " #95d475",
        },
      },
      {
        name: "失败数",
        type: "line",
        stack: "Total",
        data: props.chartData.map((line) => line.failCount),
        itemStyle: { color: "#F56C6C" },
        areaStyle: {
          color: " #f89898",
        },
      },
      {
        name: "未执行数",
        type: "line",
        stack: "Total",
        data: props.chartData.map(
          (line) => line.caseCount - line.passCount - line.failCount
        ),
        itemStyle: {
          color: "#E6A23C",
        },
        areaStyle: {
          color: " #eebe77",
        },
      },
    ],
  } as EChartsOption);
}
</script>
